<template>
  <div id="dispatchOrderListContentView">
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-show="!showErrorView"
        class="listStyle"
      >
        <OrderListDetailItem
          isMaster="true"
          :order="order"
          isDispatchOrder="true"
          v-for="order in list"
        ></OrderListDetailItem>
      </van-list>
    </van-pull-refresh>

    <div v-show="showErrorView" class="noOrder">
      <img :src="noOrder" />
      <div class="title">暂无订单~</div>
    </div>
  </div>
</template>

<script>
import OrderListDetailItem from "./../OrderListDetailItem";
import { api_orderWait, api_orderDistribution } from "@/service/api/repair";
export default {
  name: "DispatchOrderListContentView",
  components: {
    OrderListDetailItem
  },
  data() {
    return {
      noOrder: require("@/images/background/noOrder.png"),
      showErrorView: false,
      list: [],
      current: 1,
      loading: false,
      finished: false,
      isRefresh: false
    };
  },
  methods: {
    onLoad() {
      this.requestData(this.current);
    },
    onRefresh() {
      this.current = 1;
      this.isRefresh = true;
      this.list = [];
      this.finished = false;

      this.requestData(this.current);
    },
    requestData(page) {
      var data = {
        current: page,
        size: 20
      };

      this.loading = true;

      if (this.status === "0") {
        api_orderWait(data)
          .then(res => {
            this.isRefresh = false;
            this.loading = false;

            if (res.data.size * res.data.current >= res.data.total) {
              this.finished = true;
            } else {
              this.current += 1;
            }

            var dataList = res.data.records;
            for (var i = 0; i < dataList.length; i++) {
              this.list.push(dataList[i]);
            }

            if (this.list.length < 1) {
              this.showErrorView = true;
            } else {
              this.showErrorView = false;
            }
          })
          .catch(error => {
            this.showErrorView = true;
            this.isRefresh = false;
            this.$toast(error.message);
          });
      } else {
        //
        api_orderDistribution(data)
          .then(res => {
            this.isRefresh = false;
            this.loading = false;

            if (res.data.size * res.data.current >= res.data.total) {
              this.finished = true;
            } else {
              this.current += 1;
            }

            var dataList = res.data.records;
            for (var i = 0; i < dataList.length; i++) {
              this.list.push(dataList[i]);
            }

            if (this.list.length < 1) {
              this.showErrorView = true;
            } else {
              this.showErrorView = false;
            }
          })
          .catch(error => {
            this.showErrorView = true;
            this.isRefresh = false;
            this.$toast(error.message);
          });
      }
    }
  },
  created() {
    this.requestData(this.current);
  },
  props: {
    status: Number,
    isMaster: Boolean
  }
};
</script>

<style scoped>
#dispatchOrderListContentView {
  background-color: #f6f8fb;
  margin-top: 44px;
}
.noOrder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
img {
  width: 8.533333333333333rem;
  height: 8.533333333333333rem;
  margin-top: 10.8rem;
  margin-bottom: 1.4666666666666666rem;
}
.title {
  height: 1.5rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}
</style>
